<template>
  <view style="background-color: #f2f1f1;">
    <!-- 步骤条 -->
    <view class="steps-box" style="padding: 0 32rpx; background-color: #fff;">
      <u-steps :current="stepsCurrent" :list="steps" un-active-color="#adadaa" activeColor="#c3b27f" mode="number" icon="checkmark"></u-steps>
      <!-- 商家确认中 -->
      <view class="" style="margin-top: 30rpx;padding-bottom: 50rpx;">
        <view class="" style="font-size: 32rpx;color: #131313;font-weight: bold;">商家处理中</view>
        <view class="" style="color: #ADADAA;font-size: 28rpx;">{{ obj.aftersale_status_desc }}</view>
      </view>
    </view>
    <!-- 下方商品 -->
    <view class="" style="margin-top: 20rpx;background-color: #fff;padding: 20rpx 0rpx;">
      <view class="shoop">
        <view class="shoop_tit">商品详情</view>
        <view>
          <view class="picture">
            <view class="" style=""><image :src="obj.goods_image" style="width: 200rpx;height: 200rpx;" mode=""></image></view>
            <view class="" style="width: 350rpx;">
              <view class="picture_top">{{ obj.goods_title }}</view>
              <view class="picture_top_t">150*200-dsvdsvdsvdsv单人被单 Coverlet</view>
              <view class="picture_bottom_b">藕粉色</view>
              <view class="picture_bottom">￥{{ obj.goods_price }}</view>
            </view>
            <!--  -->
            <view class="num">× {{ obj.goods_num }}</view>
          </view>
          <!--  <view class="btn" v-show="ite.status_name == '售后中'"><view class="left" @click="afterSales(ite)" v-show="true">售后详情</view></view>
          <view class="btn" v-show="ite.status_name == '待发货' || ite.status_name == '待付款' || ite.status_name == '待收货'">
            <view class="left" @click="tuikuan(ite)" v-show="true">申请退款</view>
          </view> -->
        </view>
      </view>
    </view>
    <!-- 退款信息 -->
    <view class="" style="padding: 20rpx 32rpx;margin-top: 20rpx;background-color: #fff;">
      <view style="color: #001B0A;font-size: 32rpx;font-weight: bold;margin-bottom: 30rpx;" class="">退款信息</view>
      <view class="" style="display: flex;justify-content: space-between;margin-bottom: 40rpx;">
        <view class="" style="color: #5C5A55;font-size: 28rpx;">货物状态</view>
        <view class="" style="color: #AAAAAA;font-size: 28rpx;">{{ obj.refund_status_text }}</view>
      </view>
      <view class="" style="display: flex;justify-content: space-between;margin-bottom: 40rpx;">
        <view class="" style="color: #5C5A55;font-size: 28rpx;">退款原因</view>
        <view class="" style="color: #AAAAAA;font-size: 28rpx;text-align: right;" v-html="obj.logs[0].content"></view>
      </view>
      <view class="" style="display: flex;justify-content: space-between;margin-bottom: 40rpx;">
        <view class="" style="color: #5C5A55;font-size: 28rpx;">退款金额</view>
        <view class="" style="color: #AAAAAA;font-size: 28rpx;">{{ obj.goods_price }}</view>
      </view>
      <view class="" style="display: flex;justify-content: space-between;">
        <view class="" style="color: #5C5A55;font-size: 28rpx;">退款路径</view>
        <view class="" style="color: #AAAAAA;font-size: 28rpx;">原路返回</view>
      </view>
    </view>
  </view>
</template>

<script>
import { order_aftersale } from '@/api/api.js';
export default {
  data() {
    return {
      id: '',
      obj: {},
      stepsCurrent: 0,
      steps: [
        {
          name: '申请退款'
        },
        {
          name: '商家处理'
        },
        {
          name: '退款处理'
        }
      ]
    };
  },
  onLoad(options) {
    console.log(options.id);
    this.id = options.id;
    this.init(options.id);
  },
  methods: {
    async init(id) {
      let n = await order_aftersale({ id: id });
      this.obj = n.data;
      this.setSteps(n.data.aftersale_status);
    },

    // 设置步骤条
    // 设置步骤条
    setSteps(step) {
      if (step >= 0 && step < 2) {
        this.stepsCurrent = step;
      } else {
        this.stepsCurrent = 2;
        let name = '';
        switch (step) {
          case 2:
            name = '完成';
            break;
          case -1:
            name = '取消';
            break;
          case -2:
            name = '驳回';
            break;
          default:
            break;
        }
        this.steps[2].name = name;
      }
    }
  }
};
</script>

<style lang="scss">
* {
  box-sizing: border-box;
}
.shoop {
  padding: 32rpx;
  margin-top: 20rpx;
  background-color: #fff;
  .shoop_tit {
    font-size: 32rpx;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: bold;
    color: #001b0a;
  }
}
.picture {
  margin-top: 36rpx;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 20rpx;
  border-bottom: 2rpx solid #f2f1f1;
  .picture_top {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    font-size: 32rpx;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: bold;
    color: #0a0a09;
  }
  .picture_top_t {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    margin-top: 20rpx;
    font-size: 24rpx;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #5c5a55;
  }
  .picture_bottom_b {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    margin-top: 20rpx;
    font-size: 24rpx;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #5c5a55;
  }
  .picture_bottom {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    margin-top: 20rpx;
    font-size: 32rpx;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: bold;
    color: #e83241;
  }
  .num {
    font-size: 24rpx;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
    color: #cccccc;
  }
}
</style>
